<template>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="业务编码" >
        <el-text>{{ row.businessCode }}</el-text>
        <!-- <el-select v-model="queryParams.dictType">
          <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
        </el-select> -->
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['databasecollectionconfig:add']">新增数据</el-button>
      </el-col>
    </el-row>
    <el-table :data="dataList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="源表名" align="center" prop="sourceTableName" />
      <el-table-column label="新表名" align="center" prop="targetTableName" width="150" />
      <el-table-column label="源表Id名" align="center" prop="sourceIdColumnName"  />
      <!-- <el-table-column label="新表Id名" align="center" prop="targetIdColumnName"  /> -->
      <el-table-column label="最近Id" align="center" prop="latestSyncMaxId"  />
      <el-table-column label="最近时间" align="center" prop="lastSyncTime" width="160" />
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
        <template #default="scope">
          <div v-if="scope.row.id > 0">
            <el-button text size="small" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['databasecollectionconfig:edit']">编辑</el-button>
            <el-button text size="small" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['databasecollectionconfig:delete']">删除 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" v-model="open" draggable width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <!-- <el-col :lg="24">
            <el-form-item label="字典类型">
              <el-input v-model="form.dictType" :disabled="true" />
            </el-form-item>
          </el-col> -->
  
          <el-col :lg="12">
            <el-form-item label="源表名" prop="sourceTableName">
              <el-input v-model="form.sourceTableName" placeholder="请输入源表名" />
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="新表名" prop="targetTableName">
              <el-input v-model="form.targetTableName" placeholder="请输入新表名" />
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="源表Id名" prop="sourceIdColumnName">
              <el-input v-model="form.sourceIdColumnName" placeholder="请输入源表Id名" />
            </el-form-item>
          </el-col>
          
          <el-col :lg="12">
            <el-form-item label="最近Id" prop="latestSyncMaxId">
              <el-input v-model="form.latestSyncMaxId" placeholder="请输入最近Id" />
            </el-form-item>
          </el-col>

          <el-col :lg="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script setup name="dictData">

  import request,{ downFile } from '@/utils/request'

  const { proxy } = getCurrentInstance()
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    row: {
        type: Object,
        default: { id: 0 }
    }
  })

  const ids = ref()
  const loading = ref(false)
  // 总条数
  const total = ref(0)
  // 字典表格数据
  const dataList = ref([])
  // 默认字典类型
  const defaultDictType = ref('')
  // 弹出层标题
  const title = ref('')
  // 是否显示弹出层
  const open = ref(false)

  

  // 状态数据字典
  const statusOptions = ref([])
  // 业务编码字典  ut01 ,ccd01, hc01
  const typeOptions = ref([])
  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    businessCode: props.row.businessCode
  })
  // 表单参数
  
  const formRef = ref()
  const state = reactive({
    form: {},
    rules: {
      sourceTableName: [{ required: true, message: '不能为空', trigger: 'blur' }],
      targetTableName: [{ required: true, message: '不能为空', trigger: 'blur' }],
      dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
      langKey: [{ pattern: /^[A-Za-z].+$/, message: '输入格式不正确,格式：login.ok', trigger: 'blur' }]
    }
  })
  
  const { form, rules } = toRefs(state)



  /** 查询字典数据列表 */
  async function getList() {
    loading.value = true
    
    const body = queryParams
    const response = await request({
        url: `business/DatabaseCollectionConfig/QueryTableSyncConfig`,
        method: 'get',
        params: body
    })
    dataList.value = response.data.result
    total.value = response.data.totalNum
    loading.value = false
  }
  
  // 取消按钮
  function cancel() {
    open.value = false
    reset()
  }
  // 表单重置
  function reset() {
    form.value = {
      sourceTableName: '',
      sourceIdColumnName: 'Id',
    //  targetIdColumnName: 'Id',
      targetTableName: '',
      id:0,
      latestSyncMaxId:0,
      remark: '',
      businessCode:props.row.businessCode
    }
    proxy.resetForm('formRef')
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.pageNum = 1
    getList()
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm('queryForm')
    handleQuery()
  }
  /** 新增按钮操作 */
  function handleAdd() {
    reset()
    open.value = true
    title.value = '添加字典数据'
    form.value.dictType = queryParams.dictType
  }
  // 多选框选中数据
  // function handleSelectionChange(selection) {
  //   this.ids = selection.map((item) => item.dictCode)
  //   this.single = selection.length != 1
  //   this.multiple = !selection.length
  // }
  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset()

    form.value = row
    open.value = true
    title.value = '修改'
  }
  function delData(row)
  {

    const Ids = row.id 
    return  request({
        url: 'business/DatabaseCollectionConfig/DeleteTableSyncConfig/' + Ids,
        method: 'delete'
    })
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs['formRef'].validate((valid) => {
      if (valid) {
        AddTableData(form.value).then((response) => {
            proxy.$modal.msgSuccess('保存成功')
            open.value = false
            getList()
          })
      }
    })
  }

/**
 * 新增表配置信息
 */
  function AddTableData(body)
  {
   return  request({
        url: 'business/DatabaseCollectionConfig/SaveTableSyncConfig',
        method: 'post',
        data: body
    }).then((res) => {
        // debugger
        // options.value = res.data
        // if (res.data.length > 0)
        //     selectedValue.value = res.data[0].tableName

    })
  }


  
  /** 删除按钮操作 */
  function handleDelete(row) {
    
    proxy
      .$confirm('是否确认删除源表名为"' + row.sourceTableName + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(function () {
        return delData(row)
      })
      .then(() => {
        getList()
        proxy.$modal.msgSuccess('删除成功')
      })
  }
  watch(
  () => props.visible,
  (newVal, oldValue) => {
   
    if (newVal) {
      queryParams.businessCode = props.row.businessCode
        console.log('刷新',newVal)
      getList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)
  </script>
  